<template>
    <view class="memberPage">
      <!-- 导航栏 -->
      <s-nav-bar
        title="员工管理"
        :background="'transparent'"
        :titleStyle="{ color: '#ffff', fontWeight: 'bold' }"
        statusBar
        fixed
        immersive
        back
        :backStyle="{ color: '#fff' }"
      >
        <view slot="right" @click="showCreatePopup">
          <s-icon name="plus" color="#fff" size="20"></s-icon>
        </view>
      </s-nav-bar>
  
      <!-- 顶部区域 -->
      <view class="top">
        <view class="info">
          <!-- 右侧信息 -->
          <view class="info-right">
            <view class="name">员工管理</view>
            <view class="company">共 {{ total }} 位员工</view>
          </view>
        </view>
      </view>
  
      <!-- 主内容区域 -->
      <view class="main">
  
        <!-- 员工列表 -->
        <view class="listBox">
          <view class="listHeader">
            <view class="headerItem">姓名</view>
            <view class="headerItem">职位</view>
            <view class="headerItem">手机号</view>
            <view class="headerItem">状态</view>
            <view class="headerItem">操作</view>
          </view>
  
          <view class="listContent">
            <view class="listItem" v-for="item in memberList" :key="item.id">
              <view class="itemCell">{{ item.name }}</view>
              <view class="itemCell">{{ item.position || '-' }}</view>
              <view class="itemCell">{{ item.mobile || '-' }}</view>
              <view class="itemCell">
                <view class="statusTag" :class="item.status === '1' ? 'active' : 'inactive'">
                  {{ item.status === '1' ? "启用" : "禁用" }}
                </view>
              </view>
              <view class="itemCell">
                <view class="actionGroup">
                  <s-icon 
                    name="edit" 
                    size="18" 
                    color="#47c5c4" 
                    @click="showEditPopup(item)"
                  />
                  <s-icon 
                    name="delete" 
                    size="18" 
                    color="#f56c6c" 
                    @click="showDeleteConfirm(item.id)"
                  />
                </view>
              </view>
            </view>
  
            <view class="emptyTips" v-if="memberList.length === 0">
              <s-icon name="box" size="40" color="#ccc" />
              <view class="emptyText">暂无员工数据</view>
            </view>
          </view>
        </view>
      </view>
  
      <!-- 创建/编辑员工弹窗 -->
      <s-popup v-model="showFormPopup" position="bottom" round :mask="true" mask-close>
        <view class="formContainer">
          <view class="formTitle">{{ isEdit ? '编辑员工' : '新建员工' }}</view>
  
          <view class="formItem">
            <view class="formLabel">员工姓名</view>
            <uni-easyinput
              v-model="formData.name"
              placeholder="请输入员工姓名"
              clearable
            />
          </view>
  
          <view class="formItem">
            <view class="formLabel">职位</view>
            <uni-easyinput
              v-model="formData.position"
              placeholder="请输入职位"
              clearable
            />
          </view>
  
          <view class="formItem">
            <view class="formLabel">手机号</view>
            <uni-easyinput
              v-model="formData.mobile"
              placeholder="请输入手机号"
              clearable
            />
          </view>
  
          <view class="formItem">
            <view class="formLabel">邮箱</view>
            <uni-easyinput
              v-model="formData.email"
              placeholder="请输入邮箱(可选)"
              clearable
            />
          </view>
  
          <view class="formItem">
            <view class="formLabel">状态</view>
            <radio-group @change="handleStatusChange">
              <label class="radioLabel">
                <radio value="1" :checked="formData.status === '1'" color="#47c5c4" /> 启用
              </label>
              <label class="radioLabel">
                <radio value="0" :checked="formData.status === 0" color="#f56c6c" /> 禁用
              </label>
            </radio-group>
          </view>
  
          <view class="buttonGroup">
            <button type="default" size="mini" @click="showFormPopup = false">取消</button>
            <button 
              type="primary" 
              size="mini" 
              @click="handleSubmit"
              :loading="loading"
            >
              {{ isEdit ? '保存修改' : '创建员工' }}
            </button>
          </view>
        </view>
      </s-popup>
    </view>
  </template>
  
  <script>
  import Dialog from '@/uni_modules/s-ui/utils/dialog';
  
  export default {
    data() {
      return {
        memberList: [],
        total: 0,
        currentPage: 1,
        pageSize: 10,
        searchKeyword: '',
        
        showFormPopup: false,
        isEdit: false,
        loading: false,
        formData: {
          id: '',
          name: '',
          position: '',
          mobile: '',
          email: '',
          status: '1'
        }
      };
    },
    onLoad() {
      this.getMemberList();
    },
    methods: {
      // 获取员工列表
      getMemberList() {
        const params = {
          page: this.currentPage,
          pageSize: this.pageSize
        };
        
        if (this.searchKeyword) {
          params.keyword = this.searchKeyword;
        }
        
        this.sjuAjax.get('/member/list', params, (res) => {
          if (res && res.code === 200) {
            this.memberList = res.data.list;
            this.total = res.data.pagination.total;
          }
        });
      },
      
      // 搜索员工
      handleSearch() {
        this.currentPage = 1;
        this.getMemberList();
      },
      
      // 清空搜索
      handleSearchClear() {
        this.searchKeyword = '';
        this.currentPage = 1;
        this.getMemberList();
      },
      
      // 分页变化
      handlePageChange(e) {
        this.currentPage = e.current;
        this.getMemberList();
      },
      
      // 显示创建弹窗
      showCreatePopup() {
        this.isEdit = false;
        this.formData = {
          id: '',
          name: '',
          position: '',
          mobile: '',
          email: '',
          status: 1
        };
        this.showFormPopup = true;
      },
      
      // 显示编辑弹窗
      showEditPopup(item) {
        this.isEdit = true;
        this.formData = {
          id: item.id,
          name: item.name,
          position: item.position,
          mobile: item.mobile,
          email: item.email,
          status: item.status
        };
        this.showFormPopup = true;
      },
      
      // 状态变更
      handleStatusChange(e) {
        this.formData.status = parseInt(e.detail.value);
      },
      
      // 提交表单
      handleSubmit() {
        if (!this.formData.name) {
          uni.showToast({
            title: '请输入员工姓名',
            icon: 'none'
          });
          return;
        }
        
        this.loading = true;
        
        const api = this.isEdit ? '/member/update' : '/member/create';
        const successMsg = this.isEdit ? '修改成功' : '创建成功';
        
        this.sjuAjax.post(api, this.formData, (res) => {
          this.loading = false;
          if (res && res.code === 200) {
            uni.showToast({
              title: successMsg,
              icon: 'success'
            });
            this.showFormPopup = false;
            this.getMemberList();
          }
        }, () => {
          this.loading = false;
        });
      },
      
      // 显示删除确认
      showDeleteConfirm(id) {
        Dialog({
          message: '确定要删除该员工吗？删除后不可恢复！'
        }).then(() => {
          this.handleDelete(id);
        }).catch(() => {
          // 取消操作
        });
      },
      
      // 执行删除
      handleDelete(id) {
        this.sjuAjax.post('/member/delete', { id }, (res) => {
          if (res && res.code === 200) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
            this.getMemberList();
          }
        });
      }
    }
  };
  </script>
  <style lang="scss">
.memberPage {
  width: 100vw;
  height: 100vh;
  background-color: var(--v-bg);
  display: flex;
  flex-direction: column;
}

/* 顶部区域 */
.top {
  width: 100vw;
  height: 300rpx;
  background: var(--v-linear);
  border-radius: 0 0 30rpx 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;

  .info {
    width: 90%;
    display: flex;
    align-items: center;
    .info-right {
      margin-left: 40rpx; /* Replaced gap: 40rpx */
    }

    /* 右侧信息 */
    .info-right {
      display: flex;
      flex-direction: column;
      .name {
        margin-bottom: 10rpx; /* Replaced gap: 10rpx */
      }
      .name {
        font-size: 44rpx;
        letter-spacing: 4rpx;
        color: #fff;
        text-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.4);
        line-height: 1.2;
      }

      .company {
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.9);
        text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.3);
      }
    }
  }
}

/* 主内容区域 */
.main {
  position: relative;
  top: -50rpx;
  padding: 0 30rpx;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding-bottom: 120rpx;
  
  > * {
    margin-bottom: 30rpx; /* Replaced gap: 30rpx */
    &:last-child {
      margin-bottom: 0; /* Remove margin from last child */
    }
  }
  
  .searchBox {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 20rpx;
    box-shadow: var(--v-shadow);
    padding: 20rpx;
  }
  
  .listBox {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 20rpx;
    box-shadow: var(--v-shadow);
    padding: 20rpx;
    overflow: hidden;
    
    .listHeader {
      display: flex;
      background: #f8f8f8;
      border-radius: 8rpx;
      padding: 20rpx 0;
      font-weight: bold;
      color: #666;
      
      .headerItem {
        flex: 1;
        text-align: center;
        
        &:first-child {
          flex: 2;
          text-align: left;
          padding-left: 20rpx;
        }
        
        &:last-child {
          flex: 1.5;
        }
      }
    }
    
    .listContent {
      .listItem {
        display: flex;
        align-items: center;
        padding: 25rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .itemCell {
          flex: 1;
          text-align: center;
          font-size: 28rpx;
          color: #333;
          
          &:first-child {
            flex: 2;
            text-align: left;
            padding-left: 20rpx;
          }
          
          &:last-child {
            flex: 1.5;
          }
        }
        
        .statusTag {
          display: inline-block;
          padding: 4rpx 12rpx;
          border-radius: 4rpx;
          font-size: 24rpx;
          
          &.active {
            background-color: #e1f3d8;
            color: #67c23a;
          }
          
          &.inactive {
            background-color: #fde2e2;
            color: #f56c6c;
          }
        }
        
        .actionGroup {
          display: flex;
          justify-content: center;
          > * {
            margin-right: 30rpx; /* Replaced gap: 30rpx */
            &:last-child {
              margin-right: 0; /* Remove margin from last child */
            }
          }
        }
      }
      
      .emptyTips {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60rpx 0;
        color: #999;
        
        .emptyText {
          margin-top: 20rpx;
          font-size: 28rpx;
        }
      }
    }
    
    .pagination {
      margin-top: 30rpx;
      display: flex;
      justify-content: center;
    }
  }
}

/* 表单弹窗样式 */
.formContainer {
  padding: 40rpx;
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  
  .formTitle {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40rpx;
    color: #333;
  }
  
  .formItem {
    margin-bottom: 30rpx;
    
    .formLabel {
      margin-bottom: 15rpx;
      font-size: 28rpx;
      color: #666;
    }
    
    .radioLabel {
      margin-right: 30rpx;
      font-size: 28rpx;
    }
  }
  
  .buttonGroup {
    display: flex;
    justify-content: space-between;
    margin-top: 50rpx;
    
    button {
      flex: 1;
      margin: 0 10rpx;
    }
  }
}
</style>